<template>
  <div>
    <el-form
      ref="mainForm"
      size="medium"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item
        label="名称"
        prop="name"
      >
        <el-input v-model="formData.name" placeholder="名称" />
      </el-form-item>
      <el-form-item
        label="容重"
        prop="unit_weight"
      >
        <el-input v-model="formData.unit_weight" placeholder="容重" type="number">
          <template slot="append">g/cm3</template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="田间持水量"
        prop="field_capacity"
      >
        <el-input v-model="formData.field_capacity" placeholder="田间持水量" type="number" />
      </el-form-item>
      <el-form-item
        label="凋萎系数"
        prop="wilting_coefficient"
      >
        <el-input v-model="formData.wilting_coefficient" placeholder="凋萎系数" type="number" />
      </el-form-item>
      <el-form-item
        label="饱和含水率"
        prop="water_content"
      >
        <el-input v-model="formData.water_content" placeholder="饱和含水率" type="number" />
      </el-form-item>
      <el-form-item
        label="地表径流"
        prop="runoff_curve"
      >
        <el-input v-model="formData.runoff_curve" placeholder="地表径流" type="number" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submit('mainForm')"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {
          name: '',
          unit_weight: '',
          field_capacity: '',
          wilting_coefficient: '',
          water_content: '',
          runoff_curve: ''
        }
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'crops', 'cropGrowthesStd'])
  },
  methods: {
    addRow() {
      this.formData.cropGrowthes.push({})
    },
    delRow(row, index) {
      this.formData.cropGrowthes.splice(index, 1)
    },
    submit() {
      this.$refs['mainForm'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getCurrentYear() {
      return new Date().getFullYear().toString()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
